<template>
  <!-- 提现操作 -->
  <div class="mission-container">
    <div class="image-wrapper">
      <img :src="mission.productImg" alt />
    </div>
    <div class="info-wrapper elevation-2">
      <div class="title-wrapper">{{ mission.titleEnglish }}</div>

      <div class="info-detail flexbox column">
        <div class="text-left">
          <span class="title-color">Price: </span>
          <span>$ {{ mission.price }}</span>
        </div>
        <div class="text-left">
          <span class="title-color">Reward: </span>
          <span>$ {{ mission.commission ? mission.commission.toFixed(2) : ''  }}</span>
        </div>
        <div class="text-left">
          <span class="title-color">Shop: </span>
          <span>$ {{ mission.shopName }}</span>
        </div>
      </div>
    </div>

    <div class="detail-desc">
      <div class="title">Mission Details</div>

      <div class="desc-content">
        <ul class="desc-list">
          <li>1.Please search the keyword  "<em class="emp">{{ mission.keyword }}</em> "on the given platform: "<em class="emp">{{ mission.platform | Platform }}</em>"</li>
          <li>2. Normally you could find our product "on the 1st page", if not, please continue checking until you find our listing. "Asin:<em class="emp">{{ mission.productAsin }}</em></li>
          <li>3 Please don't go directly to product page anyhow. Please browse other listings as well and then add our product to cart after several minutes, then check out.</li>
          <li>4. last step, Please double check if the ASIN of the product is the same as the one provided by the merchant to avoid buying the wrong product. Asin:<em class="emp">{{ mission.productAsin }}</em></li>
          <li>5. Please test the products and leave in the given platform a review about your feedback with no less than 1 pictures around 2 days after your receipt of the product.</li>
          <li>We believe your comments on the products will Mission great helps for the merchandiser brand broadcasting. You are encouraged to write a message here to the brand through busibusy if you have more suggestions on products. Much thanks again for your participation of the MBTP (Manufacturer's brand test program).</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { ProfitIncome } from "@/api/bean";
import Cookie from "js-cookie";
import { Api, Login } from "@/api";

declare const $Vue: Vue;

@Component
export default class MissionDetail extends Vue {
  private amounts: number = 0;

  private withdraw: any = {
    account: "",
    bank: "",
    balance: 0,
    amount: 0,
    payType: 1
  };

  private mission: any = {};

  private onConfirmClicked() {
    if (this.withdraw.amount === "") {
      return this.$createToast({
        txt: "Please enter amount",
        type: "warn",
        time: 3000
      }).show();
    }

    if (this.withdraw.amount > this.withdraw.balance) {
      return this.$createToast({
        txt: "Amount is larger than your balance",
        type: "warn",
        time: 3000
      }).show();
    }
    this.submitWithdraw();
  }

  protected mounted() {
    $Vue.$emit("title", {
      message: "Mission Detail"
    });
    let json = sessionStorage.getItem("MissionDetail");
    if (json) {
      this.mission = JSON.parse(json);
    }
    this.getOrderDetail();
  }

  /**
   * 提交提现申请
   */
  private async submitWithdraw() {
    const params: ProfitIncome = {
      incomeType: 2, // 1 充值 2 提现
      userId: Number(Cookie.get("buyer_userId")),
      amount: this.withdraw.amount,
      payType: this.withdraw.payType
    };

    const { data } = await Api.saveProfitIncome.r(params);
    console.log("submitWithdraw", data);
    this.$createToast({
      txt: data.message,
      type: "correct",
      time: 3000
    }).show();
    if (data.result === 0) {
      //
    } else {
    }
  }

  /**
   * 获取用户余额详情
   */
  private async getOrderDetail() {
    const params: any = {
      orderId: this.mission.orderId,
    };
    const { data } = await Api.getOrderDetail.r(params);
    console.log("getOrderDetail", data);
    if (data.result === 0) {
      // this.withdraw.balance = Number(data.data);
      this.mission = data.data;
    } else {
    }
  }
}
</script>

<style lang="less" scoped>
@import url(../../styles/variables.less);

.mission-container {
  width: 100%;
  height: 100%;
  padding: 0.4rem 1rem;
  box-sizing: border-box;
  .image-wrapper {
    height: 10rem;
    img {
      max-height: 100%;
      max-width: 100%;
    }
  }
  .info-wrapper {
    border-radius: 9px;
    padding: 9px;
    .title-wrapper {
      height: auto;
      width: 100%;
    }
  }
}

.info-detail {
  .text-left {
    text-align: left;
  }
}

em.emp {
  color: #f44556;
}
.detail-desc {
  .title {
    font-size: 1.3rem;
    margin-top: 1rem;
  }
}
.desc-content {
  padding: 0.3rem;
  ul {
    padding-top: 1rem;
    li {
      text-align: left;
      margin: 0.8rem 0;
    }
  }
}
</style>
